<template>
  <!-- 我的 -->
  <view class="centent">
    <view class="home">
      <!-- 头部 -->
      <view class="header">
        <view class="left">
          <!-- <image
            style="width: 140rpx; border-radius: 50%"
            src="../../../static/header.png"
            mode="widthFix"
          /> -->
          <view class="left-text">
            <text>XING.</text>
          </view>
        </view>
        <view class="right">
          <u-icon name="setting" color="#000" @click="on"></u-icon>
        </view>
      </view>
      <!-- 内容 -->
      <view class="main">
        <view class="main-title"> 我的工具 </view>
        <view class="tool">
          <view class="tool-list" @click="onCollect">
            <image
              style="width: 80rpx; height: 80rpx"
              src="../../../static/fav.png"
              mode="aspectFill"
            />
            <view>我的收藏</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
    };
  },
  methods:{
    on(){
      uni.navigateTo({
        url:'/pages/tool/tool'
      })
	  },
    onCollect(){
      uni.navigateTo({
        url:'/pages/index/mine/myCollect/myCollect'
      })
    }
  },
  created(){
  }
};
</script>

<style lang="scss" scoped>
.centent {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
  .home {
    pointer-events: auto;
    .header {
      background-color: #fff;
      padding: 30rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        width: 50%;
        height: 140rpx;
        justify-items: center;
        .left-text {
          margin-left: 20rpx;
          text {
            line-height: 140rpx;
            font-size: 40rpx;
          }
        }
      }
    }

    .main {
      margin-top: 30rpx;
      height: 400rpx;
      background-color: #fff;
      padding: 0rpx 40rpx;
      .main-title {
        padding-top: 20rpx;
      }
      .tool {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;
        height: 300rpx;
        padding: 10rpx 0;
        .tool-list {
          height: 150rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 140rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
}
</style>